<template>
  <view
    class="kd-tabBar-wrap"
    id="kdTabBar"
    :class="{'bottom-area': isIphoneX}"
  >
    <view
      class="tab-wrap"
      :class="{'cur-tab' : curTabIndex === 0}"
      @click="handleSelectTab(0)"
    >
      <image
        v-if="curTabIndex === 0"
        src="/static/home_s.png"
        class="tab-image"
      ></image>
      <image
        v-else
        src="/static/home.png"
        class="tab-image"
      ></image>

      <view class="tab-name">首页</view>
    </view>

    <view
      class="tab-wrap"
      :class="{'cur-tab' : curTabIndex === 1}"
      @click="handleSelectTab(1)"
    >
      <image
        v-if="curTabIndex === 1"
        src="/static/order-grabbing_s.png"
        class="tab-image"
      ></image>
      <image
        v-else
        src="/static/order-grabbing.png"
        class="tab-image"
      ></image>

      <view class="tab-name">抢单大厅</view>
    </view>

    <view
      class="tab-wrap"
      :class="{'cur-tab' : curTabIndex === 2}"
      @click="handleSelectTab(2)"
    >
      <image
        v-if="curTabIndex === 2"
        src="/static/my_s.png"
        class="tab-image"
      ></image>
      <image
        v-else
        src="/static/my.png"
        class="tab-image"
      ></image>

      <view class="tab-name">我的</view>
    </view>
  </view>
</template>


<script>
const app = getApp()

export default {
  data() {
    return {
      curTabIndex: 2,
      isIphoneX: false
    }
  },
  methods: {
    handleSelectTab(tabIndex) {
      app.pageJump(tabIndex)
    }
  },
  created() {
    this.curTabIndex = app.globalData.curTabIndex
    this.isIphoneX = app.globalData.isIphoneX
  },
}
</script>


<style lang="scss">
.kd-tabBar-wrap {
  display: flex;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 99999999;
  width: 100%;
  height: 100rpx;
  background-color: #fff;
  border-top: 1rpx solid #F3F3F5;
  box-sizing: border-box;

  .tab-wrap {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .tab-image {
      width: 50rpx;
      height: 50rpx;
    }

    .tab-name {
      font-size: 22rpx;
      color: #DBDBDB;
    }
  }

  .cur-tab {
    .tab-name {
      color: #4CC1EE;
    }
  }
}

.bottom-area {
  height: 130rpx;
  .tab-wrap {
    height: 100rpx;
  }
}
</style>